
<template>
	<div class="risk-content">
		<div class="examreview-title">
			<div class="un-exam mb-10">{{ data.ExamName }}</div>
			<div class="chn-name mb-10">
				<img
					src="@/assets/Images/AppIcon/icon_list_user.png"
					alt=""
				/>考试人：{{ data.ChnName
				}}<span class="ml-20">{{ data.OrgName }}</span>
			</div>
			<div class="chn-name">
				<img
					src="@/assets/Images/AppIcon/icon_list_time.png"
					alt=""
				/>交卷时间：{{ data.EndTime }}
			</div>
		</div>
		<div class="exam-content">
			<div v-for="(val, key) in list" :key="key">
				<div class="mb-10 questions-title">
					<span v-if="key == 0">一、</span>
					<span v-if="key == 1">二、</span>
					<span v-if="key == 2">三、</span>
					<span v-if="key == 3">四、</span>
					<span v-if="key == 4">五、</span>
					{{ val.QName }}共{{ val.children.length }}题（{{
						val.Score + '.0'
					}}分）
				</div>
				<div
					class="questions-list"
					v-for="(item, index) in val.children"
					:key="index"
				>
					<div class="title" :id="'anchor' + item.SEQ"></div>
					<div class="exam-question-title">
						{{ item.SEQ + 1 }}、{{ item.QName }}（{{ item.Score + '.0分' }}）
					</div>
					<!-- <a :name="'anchor'+index"></a> -->
					<div class="exam-questions">
						                
						<div v-if="item.QType == 1 || item.QType == 2">
							                                                                              
							<div class="mb-10 question-answer">A、{{ item.A }}</div>
							                                                                                 
							<div class="mb-10 question-answer">B、{{ item.B }}</div>
							                                                                             
							<div class="mb-10 question-answer">C、{{ item.C }}</div>
							                                                                                
							<div class="question-answer">D、{{ item.D }}</div>
							<eagle-divider />                        
						</div>
						<div>
							<div class="mb-10 question-answer">
								<span class="user-answer">正确答案</span>
								<div>{{ item.Answer }}</div>
							</div>
							<div class="mb-10 question-answer">
								<span class="user-answer">考生答案</span>
								<div>{{ item.UserAnswer }}</div>
							</div>
							<div class="mb-10 question-answer">
								<span class="user-answer">难度</span>
								<div>
									<span v-if="item.Difficulty == 1">1-极易</span>
									<span v-if="item.Difficulty == 2">2-较易</span>
									<span v-if="item.Difficulty == 3">3-一般</span>
									<span v-if="item.Difficulty == 4">4-较难</span>
									<span v-if="item.Difficulty == 5">5-极难</span>
								</div>
							</div>
							<div class="mb-10 question-answer">
								<span class="user-answer">解析</span>
								<div>{{ item.Analysis || '无' }}</div>
							</div>
							<div class="mb-10 question-answer">
								<span class="user-answer">判定</span>
								<div v-if="item.UserAnswerResult == 1">
									<img
										src="@/assets/Images/AppIcon/activity_examresult_halfright.png"
									/>
								</div>
								<div v-if="item.UserAnswerResult == 2">
									<img
										src="@/assets/Images/AppIcon/activity_examresult_right.png"
									/>
								</div>
								<div v-if="item.UserAnswerResult == -1">
									<img
										src="@/assets/Images/AppIcon/activity_examresult_wrong.png"
									/>
								</div>
							</div>
							       
							<div
								class="mb-10 question-answer"
								v-if="item.UserScore || item.UserScore == 0"
							>
								<span class="user-answer">得分</span>                          
								<div>{{ item.UserScore }}</div>
								                            
							</div>
							                          
							<div class="mb-10 question-answer" v-else>
								    <span class="user-answer">得分</span
								><input
									type="number"
									@change="change(item)"
									v-model="item.uScore"
									style="width: 80px"
									placeholder="请输入得分"
								/>
								                            
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="exam-btns" v-if="data.IsPass == null">
			<eagle-button @click="getNext()" style="height: 40px" type="warning"
				>下一个待批阅题目</eagle-button
			>
			<eagle-button style="height: 40px" type="info" @click="_submit()"
				>提交</eagle-button
			>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
	data() {
		return {
			sque: 0,
			id: this.$route.query.id,
			loading: false,
			data: {},
			radio: '',
			radio1: [1],
			list: [],
			childrens: [],
		}
	},
	computed: {
		...mapGetters(['userName']),
	},
	created() {
		this.getDetail()
	},
	methods: {
		change(item) {
			if (item.uScore >= 0 && item.uScore <= item.Score) {
				console.log('true')
			} else {
			}
		},
		changeValue(e) {
			var val = e.target.value
			;(val) => {
				val > item.Score ? '' : val
			}
		},
		getDetail() {
			let _this = this
			_this.loading = true
			_this.$axios
			.get("/ExExamUserPaper/GetMarkingDetail",{params:{id: _this.id}})
			.then((res) => {
				_this.loading = false
				res.data.Questions.forEach((item, index) => {
					item.SEQ = index
				})
				res.data.Questions.push(
					{
						parentQType: 1,
						QName: '单选题',
						QType: 0,
						Score: 0,
					},
					{
						parentQType: 2,
						QName: '多选题',
						QType: 0,
						Score: 0,
					},
					{
						parentQType: 3,
						QName: '判断题',
						QType: 0,
						Score: 0,
					},
					{
						parentQType: 4,
						QName: '填空题',
						QType: 0,
						Score: 0,
					},
					{
						parentQType: 5,
						QName: '简答题',
						QType: 0,
						Score: 0,
					}
				)
				let newArr = this.toTree(res.data.Questions)
				let list = newArr.filter((item) => {
					if (item.children) {
						return item
					}
				})

				_this.childrens = []
				// // 计算总分
				list.forEach((item) => {
					if (item.children) {
						item.children.forEach((item1) => {
							item.Score += item1.Score
							this.childrens.push(item1)
						})
					}
				})
				_this.list = list
				_this.data = res.data
			})
		},
		getNext() {
			if (this.sque < this.childrens.length) {
				if (this.childrens[this.sque].UserAnswerResult == null) {
					this.$el.querySelector('#anchor' + this.sque).scrollIntoView({
						behavior: 'smooth', // 平滑过渡
						block: 'start', // 上边框与视窗顶部平齐。默认值
					})
					this.sque++
				} else {
					this.sque++
					this.getNext()
				}
			} else {
				return
			}
		},
		toTree(data) {
			var result = []
			if (!Array.isArray(data)) {
				return result
			}
			data.forEach((item) => {
				delete item.children
			})
			let map = {}
			data.forEach((item) => {
				map[item.parentQType] = item
			})

			data.forEach((item) => {
				let parent = map[item.QType]
				if (parent) {
					;(parent.children || (parent.children = [])).push(item)
				} else {
					result.push(item)
				}
			})
			return result
		},

		// 提交
		_submit() {
			const _this = this
			const newList = this.list.filter((item) => item.children)

			var Details = []
			newList.filter((item) => {
				item.children.filter((item1) => {
					if (!item1.UserScore) {
						if (item1.UserScore != 0) {
							Details.push({
								Score: item1.uScore,
								QCode: item1.QCode,
								titleScore: item1.Score,
							})
						}
					}
				})
			})

			const isFalse = Details.some((v) => v.Score > v.titleScore)
			if (isFalse) {
				this.$toast('设置的分值格式不正确或超过了最大分值')
				return
			}
			const isTemp = Details.every((v) => v.Score)
			if (!isTemp) {
				this.$toast('还有未批阅的题目')
				return
			}
			const data = {
				Details: Details,
				ID: this.data.ID,
			}
			_this.$axios
			.post("/ExExamUserPaper/SubmitMarking",data)
			.then((res) => {
				_this.$toast.loading()
				setTimeout(() => {
					_this.$router.back()
				}, 1000)
			})
			.catch((ret) => {
				_this.$toast('系统错误')
			})
		},
	},
}
</script>

<style lang="less" scoped>
.risk-content {
	background-color: #fff;
	min-height: 100vh;
}
.examreview-title {
	padding: 10px;
	font-size: 14px;
	.un-exam {
		font-size: 16px;
	}
	img {
		width: 16px;
		height: 16px;
		vertical-align: middle;
		margin-right: 5px;
	}
}
.exam-content {
	font-size: 14px;
	padding-bottom: 60px;
}
.exam-content::-webkit-scrollbar {
	display: none;
}
.questions-title {
	background-color: #e8f1f8;
	padding: 10px;
}
.questions-list {
	padding: 10px;
}
.exam-question-title {
	// border-bottom: 1px solid #eee;
	padding-bottom: 10px;
}
.exam-questions {
	padding: 0 10px;
	border-bottom: 1px solid #eee;
	> div {
		line-height: 1.3;
		font-size: 12px;
	}
}
.exam-btns {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40px;
	font-size: 14px;
	background-color: #fff;

	.van-button {
		width: 50%;
		border-radius: 0;
	}
}
.question-answer {
	display: flex;
	font-size: 14px;
	.user-answer {
		width: 25%;
	}
	> div {
		width: 75%;
	}
	img {
		width: 10px;
		height: 10px;
	}
}
</style>